<template>
  <div class="app-container">
    <el-row :gutter="24">
      <!--用户数据-->
      <el-col :span="24" :xs="24">
        <el-form ref="queryForm" :inline="true" :model="queryParams">
          <el-form-item label="县区" prop="city" v-show="cityShow">
            <el-select
              v-model="queryParams.city"
              clearable
              placeholder="请选择"
              size="small"
              style="width: 240px"
              @change="selectCity"
            >
              <el-option
                v-for="item in this.cityData"
                :key="item.deptCode"
                :label="item.deptName"
                :value="item.deptCode">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="乡镇" prop="town" v-show="townShow">
            <el-select
              v-model="queryParams.town"
              clearable
              placeholder="请选择"
              size="small"
              style="width: 240px"
              @change="selectTown"
            >
              <el-option
                v-for="item in this.townData"
                :key="item.deptCode"
                :label="item.deptName"
                :value="item.deptCode">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="退耕年份" prop="year">
            <el-date-picker
              v-model="queryParams.tyear"
              value-format="yyyy"
              type="year"
              placeholder="选择退耕年份">
            </el-date-picker>
          </el-form-item>
          <!--  <el-form-item>
              <el-button icon="el-icon-search" size="mini" type="cyan" @click="handleQuery">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>-->
        </el-form>

      </el-col>
    </el-row>
    <div class="content-dv">
      <el-button ref="updataButt" @click="clickSubmit" class="item-dv">
        <div style="    font-size: 17px;">
          导入数据
          <svg-icon class="svg" icon-class="excel"/>
        </div>
      </el-button>
      <el-upload
        class="uploadExcel"
        ref="upload"
        accept=".xls, .xlsx"
        :action="upload.url + '?regionCode=' + this.town+'&tyear='+this.queryParams.tyear"
        name="file"
        multiple
        :headers="headers"
        :before-upload="beforeUpload"
        :on-success="uploadSuccess"
        :on-progress="uploadProgress"
        :show-file-list="false"
      >
      </el-upload>

      <div class="item-down black-dv" @click="importData">
        <div>下载模板</div>
        <div>
          <svg-icon icon-class="download" class-name='custom-class'/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {getToken} from "@/utils/auth";
import {childlistUse} from "@/api/system/dept";
import {getInfo} from "@/api/login";

export default {
  data() {
    return {
      markerPoint: {lng: 116.404, lat: 39.915},
      show: false,
      cityShow: false,
      townShow: false,
      loading: null,
      // 日期范围
      dateRange: [],
      uploadParam: '',
      headers: {Authorization: 'Bearer ' + getToken()},
      city: '',
      town: '',
      cityData: [],
      townData: [],
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: {Authorization: "Bearer " + getToken()},
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/evaluation/accounting/importAccountingData"
      },
      // 状态数据字典
      statusOptions: [],
      queryParams: {
        tyear: ""
      }
    }
  },
  created() {
    this.getDicts('sys_normal_disable').then(response => {
      this.statusOptions = response.data
    });
    getInfo().then(response => {
      let deptCode = response.user.dept.deptCode;

      if (deptCode.length == 4) {//新区
        this.cityShow = true;
        this.townShow = true;
        childlistUse(deptCode).then(response => {
          this.cityData = response.data;
        });
      } else if (deptCode.length == 6) {//县
        this.cityShow = false;
        this.townShow = true;
        childlistUse(deptCode).then(response => {
          this.townData = response.data;
        });
      } else if (deptCode.length == 9) {//镇
        this.cityShow = false;
        this.townShow = false;
        this.town = deptCode;
        this.queryParams.town = deptCode;
      }
    });
  },
  methods: {
    // 选择县
    selectCity(val) {
      this.city = val;
      if (val != "" && val != null) {
        childlistUse(val).then(response => {
          this.townData = response.data;
        });
      }
    },
    // 选择镇
    selectTown(val) {
      this.town = val;
      /*childlist(val).then(response => {
        this.villageData = response.data;
      });*/
    },
    childlist(deptCode) {
      childlistUse(deptCode).then(response => {
        this.cityData = response.data;
      });
    },
    uploadProgress() {
      this.loading = this.$loading({
        lock: true,
        text: '正在处理中，请稍等...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
    },
    beforeUpload(file) {
      if (this.queryParams.tyear == undefined || this.queryParams.tyear == null || this.queryParams.tyear == "") {
        this.$message.error('请先选择退耕年份!');
        return false;
      }
      // 图片显示前做一下判断
      // let isJPG = /^image\/(jpeg|png|jpg)$/.test(file.type);
      let isxls = /^image\/(xls|xlsx)$/.test(file.type);
      const isLt5M = file.size / 1024 / 1024 < 5;
      // if (!isxls) {
      //   this.$message.error('上传图片格式不对!');
      // }
      if (!isLt5M) {
        this.$message.error('上传头像图片大小不能超过 5MB!');
      }
      // return isxls && isLt5M;
      return isLt5M;
    },
    uploadSuccess(res) {
      this.loading.close();
      if (res.code == "200") {
        this.msgSuccess("测评数据导入成功，请到测绘管理、评估管理模块查阅数据。");
      } else {
        this.$message.warning(res.msg);
      }
      // 获取富文本组件实例
      let quill = this.Quill
      // 如果上传成功
      if (res) {
        // 获取光标所在位置
        let length = quill.getSelection().index;
        // 插入图片，res为服务器返回的图片链接地址
        quill.insertEmbed(length, 'image', process.env.VUE_APP_BASE_API + res.data[0])
        // 调整光标到最后
        quill.setSelection(length + 1)
      } else {
        // 提示信息，需引入Message
        Message.error('图片插入失败')
      }
    },
    //点击先弹窗在上传
    clickSubmit() {
      let self = this;
      //这个地方根据自己的业务续修进行判断和调整
      if (this.queryParams.tyear == null || this.queryParams.tyear == "") {
        this.$message.warning("请选择退耕年份");
        return;
      }
      if (this.queryParams.town == null || this.queryParams.town == "") {
        this.$message.warning("请选择镇");
      } else {
        this.$refs['upload'].$refs['upload-inner'].handleClick()
      }
    },
    importData() {
      window.location.href = '/评估数据模板.xlsx'
    },
    initMap() {

    },
    infoWindowClose() {
      this.show = false
    },
    infoWindowOpen() {
      this.show = true
    },
    /** 搜索按钮操作 */
    handleQuery() {
      // this.queryParams.pageNum = 1;
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },

  }
}
</script>
<style>
.content-dv {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-content: center;
  margin-top: 80px;
}

.item-dv {
  display: flex;
  padding: 100px;
  border: 1px solid #00afff;
  border-radius: 6px;
  color: #00afff;
}

.item-down {
  display: flex;
  padding: 100px;
  border-radius: 6px;
}

.item-down:hover {
  cursor: pointer;
  border: 1px solid #00afff;
  color: #00afff;
}

.custom-class {
  margin-left: 10px;
  /*color: #00afff;*/
}

.black-dv {
  color: #000;
  border: 1px solid #000;
}

/*.avatar-uploader .el-upload {*/
/*  border: 1px dashed #d9d9d9;*/
/*  border-radius: 6px;*/
/*  cursor: pointer;*/
/*  position: relative;*/
/*  overflow: hidden;*/
/*}*/

/*.avatar-uploader .el-upload:hover {*/
/*  border-color: #409EFF;*/
/*}*/

/*.avatar-uploader-icon {*/
/*  font-size: 28px;*/
/*  color: #8c939d;*/
/*  width: 178px;*/
/*  height: 178px;*/
/*  line-height: 178px;*/
/*  text-align: center;*/
/*}*/

/*.avatar {*/
/*  width: 178px;*/
/*  height: 178px;*/
/*  display: block;*/
/*}*/
</style>
